<template>
	<view>
		<view class="post">
			<view class="wrapper" >
				<canvas style="width: 100%;height:100%;" canvas-id="firstCanvas"></canvas>
			</view>
		</view>
		<!-- <view class="qingding m-q3">
			<text class="qd_tt">学期综合评定报告</text>
			<text class="qd_xm">姓名：{{cj.name}}</text>
			<view class="qd_xq">
				<view class="qd_xqlis">
					<text>当前活跃积分：</text>
					<text>{{cj.score}}分</text>
				</view>
				<view class="qd_xqlis">
					<text>接收任务量：</text>
					<text>{{cj.reciveTaskedCount}}个</text>
				</view>
				<view class="qd_xqlis">
					<text>完成任务量：</text>
					<text>{{cj.endTaskedCount}}个</text>
				</view>
				<view class="qd_xqlis">
					<text>参观景区数：</text>
					<text>{{cj.vrCount}}个</text>
				</view>
				<view class="qd_xqlis">
					<text>提交报告数量：</text>
					<text>{{cj.reportCount}}个</text>
				</view>
				<view class="qd_xqlis">
					<text>研读的资源数：</text>
					<text>{{cj.readCount}}个</text>
				</view>
				<view class="qd_xqlis">
					<text>观看影片数：</text>
					<text>{{cj.movieCount}}篇</text>
				</view>
				<view class="qd_xqlis">
					<text>谈访记录数：</text>
					<text>{{cj.activiOnlineCount}}个</text>
				</view>
				<view class="qd_xqlis">
					<text>老师评阅：</text>
					<text>{{cj.scoredCount}}次</text>
				</view>
				<view class="qd_xqlis">
					<text>实践成绩：</text>
					<text>{{cj.avgScore}}分</text>
				</view>
			</view>
			 <view class="qys">
				 <text>评定说明：评定说明评定说明评定说明评定说明 说明评定说明评定说明</text>
				 <view class="f pingfenxx">
					 <text>能力评定：{{cj.avgScore}}分</text>
					 <view class="xx" v-if="show">
						 <image src="/static/one_icon.png" mode="widthFix"></image>
					 </view>
					 <view class="xx" v-if="show1">
						 <image src="/static/one_icon.png" mode="widthFix"></image>
						 <image src="/static/one_icon.png" mode="widthFix"></image>
					 </view>
				 </view>
			 </view>
		</view> -->
	</view>
</template>

<script>
	export default{
		data(){
			return{
				id:[],
				cj:[],
				name:'',
				score:'',
				endTaskedCount:'',
				reciveTaskedCount:'',
				vrCount:'',
				reportCount:'',
				readCount:'',
				movieCount:'',
				activiOnlineCount:'',
				scoredCount:'',
				avgScore:'',
				pingding:'评定说明：很好不错',
				type:50,
				show:false,
				show1:false,
			}
		},
        onReady: function() {
            var that = this;
            that.open_init();
        },
        onShow:function(){
		},
		onLoad(option){
			this.id = option.id
			console.log(this.id)
		},
		onNavigationBarButtonTap(e) {
			this.qr_base()
		},
		created() {
			this.init()
		},
		methods:{
			init(){
				var that = this;
			},
			qr_base() {
			    var that = this;
			    uni.showLoading({
			        title: '保存中...'
			    });
			    uni.canvasToTempFilePath({
			        fileType:'jpg',
			        canvasId: 'firstCanvas',
			        success: function(res) {
			            // console.log(res);
			            uni.saveImageToPhotosAlbum({
			                filePath: res.tempFilePath,
			                success: function() {
			                    // that.toast(res.tempFilePath);
			                    uni.showToast({
			                        title: '已经保存到相册',
			                        icon: 'none'
			                    });
			                }
			            });
			        },
			        fail: function(error) {
			            console.log(JSON.stringify(error));
			            uni.hideLoading()
			        }
			    })
			},
			open_init(){
					let that = this
					let params = {
					  "termName":that.id
					}
					that.pyReq(that.$http.getStuTermReport,params,function(res){
							  that.cj = res.result
							  that.name = res.result.name
							  that.score = res.result.score
							  that.reciveTaskedCount = res.result.reciveTaskedCount
							  that.endTaskedCount = res.result.endTaskedCount
							  that.vrCount = res.result.vrCount
							  that.reportCount = res.result.reportCount
							  that.readCount = res.result.readCount
							  that.movieCount = res.result.movieCount
							  that.activiOnlineCount = res.result.movieCount
							  that.scoredCount = res.result.scoredCount
							  that.avgScore = res.result.avgScore
							  
							  // var inviteCode = this.base64_url;
							  //获取手机设备的信息
							  var system_info = uni.getSystemInfoSync();
							  var context = uni.createCanvasContext('firstCanvas');
							  context.drawImage( '/static/bj.jpg',system_info.screenWidth/900,system_info.screenHeight/900,system_info.screenWidth/1,system_info.screenHeight*0.88);
							  // context.drawImage(inviteCode,system_info.screenWidth/3, system_info.screenHeight*0.578, system_info.screenWidth/2.8, system_info.screenWidth/2.8);
							  								/* 姓名 */
							  context.font = "15px Arial";
							  context.fillStyle="#B31610";
							  context.fillText(this.name, system_info.screenWidth/2,system_info.screenHeight*0.19);
							  context.font = "13px Arial";
							  context.fillStyle="#B31610";
							  context.fillText(this.score +'分', system_info.screenWidth/2.6,system_info.screenHeight*0.281);
							  context.font = "13px Arial";
							  context.fillStyle="#B31610";
							  context.fillText(this.reciveTaskedCount +'个', system_info.screenWidth/1.3,system_info.screenHeight*0.281);
							  context.fillText(this.endTaskedCount +'个', system_info.screenWidth/2.7,system_info.screenHeight*0.332);
							  context.fillText(this.vrCount +'个', system_info.screenWidth/1.3,system_info.screenHeight*0.332);
							  context.fillText(this.reportCount +'个', system_info.screenWidth/2.6,system_info.screenHeight*0.3818);
							  context.fillText(this.readCount +'个', system_info.screenWidth/1.25,system_info.screenHeight*0.38);
							  context.fillText(this.movieCount +'篇', system_info.screenWidth/2.8,system_info.screenHeight*0.435);
							  context.fillText(this.activiOnlineCount +'个', system_info.screenWidth/1.3,system_info.screenHeight*0.435);
							  context.fillText(this.scoredCount +'次', system_info.screenWidth/3,system_info.screenHeight*0.48);
							  context.fillText(this.avgScore +'分', system_info.screenWidth/1.38,system_info.screenHeight*0.48);
							  context.font = "13px Arial";
							  context.fillStyle="#B31610";
							  context.fillText(this.pingding, system_info.screenWidth/7.5,system_info.screenHeight*0.68);
							  context.fillText(this.avgScore +'分', system_info.screenWidth/3.2,system_info.screenHeight*0.75);
							  if(that.avgScore == 0 || that.avgScore <= 10){
							  	context.drawImage( '/static/one_icon.png',system_info.screenWidth/2,system_info.screenHeight*0.72);
							  }else if(that.avgScore <= 20 || that.avgScore <= 40){
							  								  context.drawImage( '/static/one_icon.png',system_info.screenWidth/2,system_info.screenHeight*0.72);
							  								  context.drawImage( '/static/one_icon.png',system_info.screenWidth/1.7,system_info.screenHeight*0.72);
							  }else if(that.avgScore <= 40 || that.avgScore <= 60){
							  								  context.drawImage( '/static/one_icon.png',system_info.screenWidth/2,system_info.screenHeight*0.72);
							  								  context.drawImage( '/static/one_icon.png',system_info.screenWidth/1.7,system_info.screenHeight*0.72);
							  								  context.drawImage( '/static/one_icon.png',system_info.screenWidth/1.5,system_info.screenHeight*0.72);
							  }else if(that.avgScore <= 60 || that.avgScore <= 80){
							  								  context.drawImage( '/static/one_icon.png',system_info.screenWidth/2,system_info.screenHeight*0.72);
							  								  context.drawImage( '/static/one_icon.png',system_info.screenWidth/1.7,system_info.screenHeight*0.72);
							  								  context.drawImage( '/static/one_icon.png',system_info.screenWidth/1.5,system_info.screenHeight*0.72);
							  								  context.drawImage( '/static/one_icon.png',system_info.screenWidth/1.35,system_info.screenHeight*0.72);
							  }else if(that.avgScore <= 80 || that.avgScore <= 100){
							  								  context.drawImage( '/static/one_icon.png',system_info.screenWidth/2,system_info.screenHeight*0.72);
							  								  context.drawImage( '/static/one_icon.png',system_info.screenWidth/1.7,system_info.screenHeight*0.72);
							  								  context.drawImage( '/static/one_icon.png',system_info.screenWidth/1.5,system_info.screenHeight*0.72);
							  								  context.drawImage( '/static/one_icon.png',system_info.screenWidth/1.35,system_info.screenHeight*0.72);
							  								  context.drawImage( '/static/one_icon.png',system_info.screenWidth/1.23,system_info.screenHeight*0.72);
							  }
							  context.draw();
					});
					// let headers={
					// 	 'content-type': 'application/x-www-form-urlencoded',
					// 	 'token': uni.getStorageSync('token')
					// }
					//  uni.request({
					// 	  url: that.$http.getStuTermReport,
					// 	  method: 'POST',
					// 	  data: params,
					// 	  header: headers,
					// 	  success: (res)=>{
					// 		  console.log(res)
					// 		  that.cj = res.data.result
					// 		  that.name = res.data.result.name
					// 		  that.score = res.data.result.score
					// 		  that.reciveTaskedCount = res.data.result.reciveTaskedCount
					// 		  that.endTaskedCount = res.data.result.endTaskedCount
					// 		  that.vrCount = res.data.result.vrCount
					// 		  that.reportCount = res.data.result.reportCount
					// 		  that.readCount = res.data.result.readCount
					// 		  that.movieCount = res.data.result.movieCount
					// 		  that.activiOnlineCount = res.data.result.movieCount
					// 		  that.scoredCount = res.data.result.scoredCount
					// 		  that.avgScore = res.data.result.avgScore
							  
					// 		  // var inviteCode = this.base64_url;
					// 		  //获取手机设备的信息
					// 		  var system_info = uni.getSystemInfoSync();
					// 		  var context = uni.createCanvasContext('firstCanvas');
					// 		  context.drawImage( '/static/bj.jpg',system_info.screenWidth/900,system_info.screenHeight/900,system_info.screenWidth/1,system_info.screenHeight*0.88);
					// 		  // context.drawImage(inviteCode,system_info.screenWidth/3, system_info.screenHeight*0.578, system_info.screenWidth/2.8, system_info.screenWidth/2.8);
					// 			/* 姓名 */
					// 		  context.font = "15px Arial";
					// 		  context.fillStyle="#B31610";
					// 		  context.fillText(this.name, system_info.screenWidth/2,system_info.screenHeight*0.19);
					// 		  context.font = "13px Arial";
					// 		  context.fillStyle="#B31610";
					// 		  context.fillText(this.score +'分', system_info.screenWidth/2.6,system_info.screenHeight*0.281);
					// 		  context.font = "13px Arial";
					// 		  context.fillStyle="#B31610";
					// 		  context.fillText(this.reciveTaskedCount +'个', system_info.screenWidth/1.3,system_info.screenHeight*0.281);
					// 		  context.fillText(this.endTaskedCount +'个', system_info.screenWidth/2.7,system_info.screenHeight*0.332);
					// 		  context.fillText(this.vrCount +'个', system_info.screenWidth/1.3,system_info.screenHeight*0.332);
					// 		  context.fillText(this.reportCount +'个', system_info.screenWidth/2.6,system_info.screenHeight*0.3818);
					// 		  context.fillText(this.readCount +'个', system_info.screenWidth/1.25,system_info.screenHeight*0.38);
					// 		  context.fillText(this.movieCount +'篇', system_info.screenWidth/2.8,system_info.screenHeight*0.435);
					// 		  context.fillText(this.activiOnlineCount +'个', system_info.screenWidth/1.3,system_info.screenHeight*0.435);
					// 		  context.fillText(this.scoredCount +'次', system_info.screenWidth/3,system_info.screenHeight*0.48);
					// 		  context.fillText(this.avgScore +'分', system_info.screenWidth/1.38,system_info.screenHeight*0.48);
					// 		  context.font = "13px Arial";
					// 		  context.fillStyle="#B31610";
					// 		  context.fillText(this.pingding, system_info.screenWidth/7.5,system_info.screenHeight*0.68);
					// 		  context.fillText(this.avgScore +'分', system_info.screenWidth/3.2,system_info.screenHeight*0.75);
					// 		  if(that.avgScore == 0 || that.avgScore <= 10){
					// 		  	context.drawImage( '/static/one_icon.png',system_info.screenWidth/2,system_info.screenHeight*0.72);
					// 		  }else if(that.avgScore <= 20 || that.avgScore <= 40){
					// 			  context.drawImage( '/static/one_icon.png',system_info.screenWidth/2,system_info.screenHeight*0.72);
					// 			  context.drawImage( '/static/one_icon.png',system_info.screenWidth/1.7,system_info.screenHeight*0.72);
					// 		  }else if(that.avgScore <= 40 || that.avgScore <= 60){
					// 			  context.drawImage( '/static/one_icon.png',system_info.screenWidth/2,system_info.screenHeight*0.72);
					// 			  context.drawImage( '/static/one_icon.png',system_info.screenWidth/1.7,system_info.screenHeight*0.72);
					// 			  context.drawImage( '/static/one_icon.png',system_info.screenWidth/1.5,system_info.screenHeight*0.72);
					// 		  }else if(that.avgScore <= 60 || that.avgScore <= 80){
					// 			  context.drawImage( '/static/one_icon.png',system_info.screenWidth/2,system_info.screenHeight*0.72);
					// 			  context.drawImage( '/static/one_icon.png',system_info.screenWidth/1.7,system_info.screenHeight*0.72);
					// 			  context.drawImage( '/static/one_icon.png',system_info.screenWidth/1.5,system_info.screenHeight*0.72);
					// 			  context.drawImage( '/static/one_icon.png',system_info.screenWidth/1.35,system_info.screenHeight*0.72);
					// 		  }else if(that.avgScore <= 80 || that.avgScore <= 100){
					// 			  context.drawImage( '/static/one_icon.png',system_info.screenWidth/2,system_info.screenHeight*0.72);
					// 			  context.drawImage( '/static/one_icon.png',system_info.screenWidth/1.7,system_info.screenHeight*0.72);
					// 			  context.drawImage( '/static/one_icon.png',system_info.screenWidth/1.5,system_info.screenHeight*0.72);
					// 			  context.drawImage( '/static/one_icon.png',system_info.screenWidth/1.35,system_info.screenHeight*0.72);
					// 			  context.drawImage( '/static/one_icon.png',system_info.screenWidth/1.23,system_info.screenHeight*0.72);
					// 		  }
					// 		  // context.drawImage( '/static/one_icon.png',system_info.screenWidth/2,system_info.screenHeight*0.72);
					// 		  // context.drawImage( '/static/one_icon.png',system_info.screenWidth/1.7,system_info.screenHeight*0.72);
					// 		  // context.drawImage( '/static/one_icon.png',system_info.screenWidth/1.5,system_info.screenHeight*0.72);
					// 		  // context.drawImage( '/static/one_icon.png',system_info.screenWidth/1.35,system_info.screenHeight*0.72);
					// 		  // context.drawImage( '/static/one_icon.png',system_info.screenWidth/1.23,system_info.screenHeight*0.72);
					// 		  context.draw();
							  
							  
							  
							  
					// 	  },
					// 	  fail: (err)=>{
					// 		  console.log(err)
					// 	  }
					// })  
			    
			},
		},
		mounted() {
		}
	}
</script>

<style>
	page{background-color: #FBF5E7;}
	.xx image{
		width: 28upx;
		margin-right: 10upx;
	}	
	.qys{
		width: 500upx;
		margin: 0 auto;
		margin-top: 40upx;
	}
	.pingfenxx{
		margin-top: 30upx;
		justify-content: space-between;
	}
	.qys text{
		font-size: 24upx;
		color: #BB3832;
		display: block;
		line-height:40upx;
	}
	.qd_xqlis{
		width: 240upx;
		margin-top:15upx;
	}
	.qd_xqlis text{
		font-size: 24upx;
		color: #000000;
	}
	.qd_xq{
		width: 500upx;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 60upx;
		border-bottom: 1upx solid #955209;
		padding-bottom: 60upx;
	}
	/* .qingding{
		width: 680upx;
		height: 1083upx;
		background-image: url(../../static/baogao.png);
		background-position: center;
		background-size: 100% 100%;
	} */
	.qd_tt{
		display: block;
		text-align: center;
		font-size: 42upx;
		color: #B31610;
		padding-top: 127upx;
		font-weight: 700;
	}
	.qd_xm{
		display: block;
		text-align: center;
		border: 1upx solid #9D601C;
		color: #9D601C;
		width: 250upx;
		height: 50upx;
		line-height: 50upx;
		font-size: 30upx;
		margin: 0 auto;
		border-radius: 30upx;
		margin-top: 30upx;
	}
	
	.wrapper {
	    position: fixed;
	    left: 0;
	    top: 0;
	    width: 100%;
	    height: 100%;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    &.left{
	        transform: translateX(960upx);
	        &.show {
	            transform: translateX(150upx);
	        }
	
	    }
	
	    &.right{
	        transform: translateX(-960upx);
	        &.show {
	            transform: translateX(0);
	        }
	
	    }
	}
	/* #ifdef H5 */
	.wrapper {
	    padding-top: 44px;
	    padding-bottom: 44px;
	    box-sizing: border-box;
	}
	/* #endif */
</style>
